<%--
  Created by IntelliJ IDEA.
  User: dhd
  Date: 2024/5/7
  Time: 10:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>学生管理系统</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap/css/bootstrap.min.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap/js/bootstrap.min.js"></script>
    <style>
        td {
            vertical-align: middle !important;
        }
    </style>
</head>
<body>

<div class="container-fluid">
    <%--头部--%>
    <div class="row">
        <div class="col">
            <h1 class="text-center">学生管理系统</h1>
        </div>
    </div>
    <%--新增按钮  输入框--%>
    <div class="row">
        <div class="col">
            <form class="form-inline">
                <div class="col">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addBox">新增</button>
                </div>

                <div class="form-group">
                    <label for="userName">用户名:</label>
                    <input type="text" id="userName" class="form-control mx-sm-3">
                </div>
                <div class="form-group">
                    <label for="userName">所属班级:</label>
                    <select id="inputState" class="form-control mx-sm-3">
                        <option selected value="-1">全部</option>
                        <!--                        <option value="1">高职软件_2002</option>-->
                        <!--                        <option value="2">高职数媒_2002</option>-->
                        <!--                        <option value="3">中专软件_2102</option>-->
                    </select>
                </div>
                <div class="form-group">
                    <div class="col">
                        <button class="btn btn-primary" type="button" id="search" onclick="searchList()">搜索</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
    <%--table数据--%>
    <div class="row">
        <div class="col">
            <table class="table table-hover text-center">
                <thead>
                <tr>
                    <th scope="col">编号</th>
                    <th scope="col">姓名</th>
                    <th scope="col">头像</th>
                    <th scope="col">所属班级</th>
                    <th scope="col">性别</th>
                    <th scope="col">手机号</th>
                    <th scope="col">年龄</th>
                    <th scope="col">家庭住址</th>
                    <th scope="col">状态</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <%--分页--%>
    <div class="row">
        <div class="col">
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-end" id="pageBox">
                    <%--                    <li class="page-item disabled">--%>
                    <%--                        <a class="page-link" href="#" tabindex="-1">首页</a>--%>
                    <%--                    </li>--%>
                    <%--                    <li class="page-item"><a class="page-link" href="#">1</a></li>--%>
                    <%--                    <li class="page-item active"><a class="page-link" href="#">2</a></li>--%>
                    <%--                    <li class="page-item"><a class="page-link" href="#">3</a></li>--%>
                    <%--                    <li class="page-item">--%>
                    <%--                        <a class="page-link" href="#">下一页</a>--%>
                    <%--                    </li>--%>
                </ul>
            </nav>
        </div>
    </div>
    <%--begin新增模态框--%>
    <div class="row">
        <div class="col">
            <div class="modal fade" id="addBox" tabindex="-1" role="dialog"
                 aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="title">新增学员</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <%--用户id的输入框--%>
                                <div class="form-group row" id="stuIdRow" hidden>
                                    <label for="stuName" class="col-sm-2 col-form-label">用户编号</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="stuId" name="stuId">
                                    </div>
                                </div>
                                <%--用户名的输入框--%>
                                <div class="form-group row">
                                    <label for="stuName" class="col-sm-2 col-form-label">用户名</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="stuName" placeholder="请输入用户名">
                                    </div>
                                </div>
                                <%--所属班级--%>
                                <div class="form-group row">
                                    <label for="inputClass" class="col-sm-2 col-form-label">所属班级</label>
                                    <div class="col-sm-10">
                                        <select id="inputClass" class="form-control mx-sm-3">
                                            <option selected value="-1">全部</option>
                                            <%--                                            <option value="1">高职软件_2002</option>--%>
                                            <%--                                            <option value="2">高职数媒_2002</option>--%>
                                            <%--                                            <option value="3">中专软件_2102</option>--%>
                                        </select>
                                    </div>
                                </div>
                                <%--性别--%>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">性别</label>
                                    <div class="col-sm-10">
                                        <input type="radio" name="sex" value="男" checked>男
                                        <input type="radio" name="sex" value="女">女
                                    </div>
                                </div>
                                </fieldset>
                                <%--手机号--%>
                                <div class="form-group row">
                                    <label for="phone" class="col-sm-2 col-form-label">手机号</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="phone" placeholder="请输入手机号">
                                    </div>
                                </div>
                                <%--生日--%>
                                <div class="form-group row">
                                    <label for="birthday" class="col-sm-2 col-form-label">生日</label>
                                    <div class="col-sm-10">
                                        <input type="date" class="form-control" id="birthday" placeholder="请选择生日：">
                                    </div>
                                </div>
                                <%--地址--%>
                                <div class="form-group row">
                                    <label for="address" class="col-sm-2 col-form-label">地址</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="address" placeholder="请输入地址：" 地址>
                                    </div>
                                </div>
                                <%--头像--%>
                                <div class="form-group row">
                                    <label for="image" class="col-sm-2 col-form-label">头像</label>
                                    <div class="col-sm-10">
                                        <input type="file" class="form-control" id="image" placeholder="请选择头像：">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="saveStu">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
</body>
</html>
<script>
    //页面加载
    //1.获取全部班级列表
    let classUrl = '/stu_sys/class.action'
    let data = {opr: 'list'}
    $.ajax({
        "url": classUrl,
        'type': 'get',
        'data': data,
        'dataType': 'json',
        'success': classList,
        'error': function () {
            alert("查询失败！请联系管理员")
        }
    })

    //回调成功，加载数据
    function classList(data) {
        console.log(data);
        data.forEach(dd => {
            $('#inputState').append(`<option value="` + dd.id + `">` + dd.className + `</option>`);
            $('#inputClass').append(`<option value="` + dd.id + `">` + dd.className + `</option>`);
        })
    }

    // 2.分页展示数据
    function onloadData(pageNum) {
        let stuUrl = '/stu_sys/stu.action';
        let opr = 'list';
        let stuName = $('#userName').val();
        let classId = $('#inputState').val();
        let stuData = {opr, stuName, classId, pageNum};
        $.ajax({
            'url': stuUrl,
            'type': 'post',
            'data': stuData,
            'dataType': 'json',
            'success': stuPageList,
            'error': function () {
                alert("加载失败！")
            }
        })
    }
    //页面加载时调用
    window.onload = onloadData(1);


    function stuPageList(data) {
        // console.log(data);
        console.log("分页数据的结果集", data.dataList);
        //清空内容
        $('tbody').empty();
        //table数据
        if (data.dataList != null) {
            data.dataList.forEach(dd => {
                let imgPath = 'images/image01.webp';
                if (dd.imgPath != "") {
                    imgPath = dd.imgPath;
                }
                let state = '禁用';
                if (dd.state == 0) {
                    state = '启用';
                }
                $('tbody').append(`<tr>
                    <td>` + dd.id + `</td>
                    <td>` + dd.userName + `</td>
                    <td>
                        <img src="${pageContext.request.contextPath}/` + imgPath + `" width="100px" height="60px" class="rounded mx-auto d-block"
                             alt="...">
                    </td>
                    <td>` + dd.className + `</td>
                    <td>` + dd.sex + `</td>
                    <td>` + dd.phone + `</td>
                    <td>` + dd.age + `</td>
                    <td>` + dd.address + `</td>
                    <td>` + state + `</td>
                    <td>
                        <button type="button" class="btn btn-info btn-sm" onclick='detailStu(` + dd.id + `)'>详情</button>
                        <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#addBox"
                        onclick='editStu(` + dd.id + `)'>编辑</button>
                        <button type="button" class="btn btn-danger btn-sm" onclick='delStu(` + dd.id + `)'>删除</button>
                    </td>
                </tr>`)

            })
        }


        //分页数据
        //获取总页数
        let countPage = data.countPage;
        //当前页数
        let pageNum = data.pageNum;
        //清空
        $('#pageBox').empty();
        //添加首页
        $('#pageBox').append(`
                <li class="page-item">
                    <a class="page-link" href="#" tabindex="-1" onclick="onloadData(1)">首页</a>
                </li>`);
        //根据总页数遍历
        for (let i = 0; i < countPage; i++) {
            //创建li标签
            let li = $(`<li class="page-item"></li>`);
            //创建a标签
            let a = $(`<a class="page-link" href="#" onclick="onloadData(` + (i + 1) + `)">` + (i + 1) + `</a>`);

            li.append(a);
            //添加样式 active激活状态
            if (pageNum == (i + 1)) {
                li.append('active');
            }
            $('#pageBox').append(li);
        }
        let nextLi = $(`<li class="page-item"> </li>`);
        let nextA = $(`<a class="page-link" href="#" onclick="onloadData(` + (pageNum + 1) + `)">下一页</a>`);
        nextLi.append(nextA);
        //判断  当前页==总页数   添加样式  disabled  禁用
        if (pageNum == countPage) {
            nextLi.addClass('disabled');
        }
        $('#pageBox').append(nextLi);
    }


    //详情
    function detailStu(id) {
        alert(id);
        window.location.href = '/stu_sys/stu.action?opr=stuDetail&&id=' + id
    }


    //点击搜索时调用
    function searchList() {
        onloadData(1);
    }

    //删除
    function del(id) {
        alert(id);
        window.location.reload();

    }

    //点击保存按钮
    $('#saveStu').click(function () {
        //1.获取表单数据
        //获取表单元素
        //用户名
        let opr = 'edit';
        let stuId = $('#stuId').val();
        let stuName = $('#stuName').val();
        let sex = $("input[name='sex']:checked").val();
        //班级
        let classId = $('#inputClass').val();
        //头像
        let imageFile = $('#image')[0].files[0];
        let phone = $('#phone').val();
        let birthday = $('#birthday').val();
        let address = $('#address').val();
        let params = {opr, stuId, stuName, sex, classId, imageFile, phone, birthday, address}
        let formData = new FormData();
        $.each(params, function (key, value) {
            formData.append(key, value);
        })
        /* for (let key in params) {
             console.log(key+':'+params[key])
             formData.append(key, params[key]);
         }*/
        //2.发出请求
        $.ajax({
            url: '/stu_sys/stu.action',
            type: 'post',
            data: formData,
            dataType: 'json',
            processData: false,  //告诉jQuery不要处理数据
            contentType: false,  //告诉jQuery不要设置ContentType头部
            success: function (data) {
                //处理服务器的响应
                console.log(data);
                if (data.code == 'ok') {
                    //添加属性
                    $(this).attr('data-dismiss', 'modal');
                    //重新加载页面
                    location.reload();
                }
            },
            error: function () {
                //处理错误
                alert("保存失败！");
            }
        })
    })


    //点击修改按钮
    function editStu(id) {
        $('#title').html('编辑学生');
        $('#stuIdRow').removeAttr('hidden');
        //通过Id获取当前学生的信息   防止前台页面数据不是最新数据
        let opr = 'detail';
        $.ajax({
            url: '/stu_sys/stu.action',
            type: 'get',
            data: {id, opr},
            dataType: 'json',
            success: stuDetail,
            error: function () {
                alert('获取用户信息失败！');
            }
        })
    }

    //点击修改时填充数据
    function stuDetail(data) {
        console.log(data);
        $('#stuId').val(data.id);
        $('#stuName').val(data.userName);
        $("input[name='sex']:checked").val(data.sex);
        //班级
        $('#inputClass').val(data.classId);

        $('#phone').val(data.phone);
        $('#birthday').val(data.birthday);
        $('#address').val(data.address);
    }


    //删除按钮
    function delStu(id) {
        let delStuUrl = '/stu_sys/stu.action';
        let opr = 'delStu';
        $.ajax({
            'url': delStuUrl,
            'type': 'post',
            'data': {opr, id},
            'dataType': 'json',
            'success': del,
            'error': function () {
                alert("加载失败！")
            }
        })
    }

</script>
